<template>
  <HoseVue class="hoseVue" :obj="obj">
    <SearchVue :iptObj="iptObj"></SearchVue>
    <el-table
      :data="info"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        v-for="(key,item,index) in tableArr"
        :prop="item"
        :label="key"
        :key="item"
        :width="index === 2 ? 300 : 'auto'"
      />

      <el-table-column fixed="right" label="报损">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="caoZuo1(scope.$index)">报损</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="申请送货">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="apply(scope.$index)">申请送货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PaginationVue @cChange="changePage" :total="50"></PaginationVue>
  </HoseVue>

  <DialogVue></DialogVue>
  <BsEditingVue></BsEditingVue>
  <BsAuditVue></BsAuditVue>
  <InfoTableVue title="报损历史"></InfoTableVue>
  <InfoTableTwoVue title="申请历史" btnName="新增申请"  ></InfoTableTwoVue>
  <DialogEndVue></DialogEndVue>
</template>

<script setup>
// 分页器
import PaginationVue from "../../components/Pagination.vue";
import DialogVue from "../asyncElement/inventory/Dialog.vue";
// 报损编辑中
import BsEditingVue from "./inventory/BsEditing.vue";
// 报损审核中
import BsAuditVue from "./inventory/BsAudit.vue";
import DialogEndVue from "./inventory/DialogEnd.vue";
// 报损和申请表格
import InfoTableVue from "./inventory/InfoTable.vue";
import InfoTableTwoVue from "./inventory/InfoTableTwo.vue";
// 头部布局
import HoseVue from "../../components/hose.vue";
// 搜索
import SearchVue from "../../components/Search.vue";
import { useInventoryStore } from "../../stores/InventoryVM.js";
import { ref, reactive } from "vue";
import { Inventory } from "../../api/index";
const InventoryStore = useInventoryStore();
const tableArr = {
  goodsid: "商品编号",
  gname: "商品名称",
  norms: "规格",
  gprice: "价格",
  storecount: "库存",
  buynum: "总销量"
};
const obj = {
  flag: false
};
const spanMap = ref({});
const mergedColumns = ref(["goodsid", "gname"]);

const info = ref([]);
Inventory(1, 10).then(res => {
  info.value = res.data.data.stockList;
  getSpanArr(info.value);
});

function getSpanArr(data) {
  for (var i = 0; i < data.length; i++) {
    if (i === 0) {
      mergedColumns.value.forEach(column => {
        spanMap.value[column] = {
          spanArr: [1],
          pos: 0
        };
      });
    } else {
      mergedColumns.value.forEach(column => {
        if (data[i][column] === data[i - 1][column]) {
          spanMap.value[column].spanArr[spanMap.value[column].pos] += 1;
          spanMap.value[column].spanArr.push(0);
        } else {
          spanMap.value[column].spanArr.push(1);
          spanMap.value[column].pos = i;
        }
      });
    }
  }
}

function objectSpanMethod({ column, rowIndex }) {
  if (spanMap.value[column.property]) {
    const row = spanMap.value[column.property].spanArr[rowIndex];
    const col = row > 0 ? 1 : 0;
    return {
      rowspan: row,
      colspan: col
    };
  }
}

const iptObj = {
  title: "库存管理",
  userBool: false,
  userTitle: "订单编号",
  userTel: "商品编号",
  userRegion: "商品名称",
  telrBool: true,
  regionBool: true,
  userText: "请输入商品编号",
  telText: "请输入商品名称",
  regionText: "请选择内容",
  BtnBool: true
};
// index为点击对象的索引下标
function caoZuo1(index) {
  // 点击报损，弹出对应遮盖层
  InventoryStore.changeBoolean("InfoTable");
}
function apply() {
  InventoryStore.changeBoolean("InfoTable2");
}

function changePage(num){
  Inventory(num, 10).then(res => {
  info.value = res.data.data.stockList;
  getSpanArr(info.value);
});
}
</script>

<style scoped>
</style>